import React, { Component } from 'react'
import { View, StyleSheet, Text } from 'react-native'
import PropTypes from 'prop-types'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import CustomImage from 'src/components/image/CustomImage'
import { getTimeDiff, formatTime } from 'src/utils/TimeUtil'
import CustomButton from '../button/CustomButton'
import NavigationUtil from 'src/utils/NavigationUtil'

export default class LiveList extends Component {
  static propTypes = {
    liveData: PropTypes.object,
    type: PropTypes.string
  }

  constructor (props) {
    super(props)
    this.state = {
    }
  }

  render () {
    const { liveData } = this.props
    return (this._liveItem(liveData))
  }

  _liveItem = (item) => {
    const { type } = this.props
    const timeText = this.dealTimerText(item.startTime, item.state)
    const signUpNumText = this.dealSignText(timeText.showLookCount ? item.watchCount : item.signUpNum, item.state)
    const typeBool = type === 'LiveSubscribe'
    const id = typeBool ? item.channelId : item.id
    const isInLine = item.state === 'INLINE'
    return (
      <CustomButton params={{ id, isInLine }} onPress={this.handleItemClick}>
        <View style={[styles.liveItem, isInLine && styles.inLineStyle]}>
          <CustomImage style={styles.leftImg} source={{ uri: item.coverImg }} />
          {!typeBool && !timeText.showLookCount && <View style={styles.signUp}><Text style={styles.signUpText}>{!item.isSignUp ? '未报名' : '已报名'}</Text></View>}
          <View style={styles.rightContent}>
            <CustomImage style={styles.liveIcon} source={require('@/imgC/home/video.png')} />
            <Text numberOfLines={1} style={styles.title}>{item.name}</Text>
            <Text numberOfLines={1} style={styles.subTitle}>{timeText.val} · {signUpNumText}</Text>
          </View>
        </View>
      </CustomButton>
    )
  }

  handleItemClick = ({ id: channelId, isInLine }) => {
    !isInLine && NavigationUtil.navigate('LiveDetail', {
      channelId
    })
  }

  dealTimerText = (time, state) => {
    let showLookCount = true
    let timeText = ''
    const timer = new Date(formatTime(time)).getTime()
    const timeCalc = getTimeDiff(timer)
    switch (state) {
      case 'LIVING':
        timeText = '直播中'
        break
      case 'END':
        timeText = '直播结束'
        break
      case 'INLINE':
        timeText = '已下架'
        break
      case 'RECORDED':
        timeText = '视频录制中'
        break
      case 'RECORDED_END':
        timeText = '回放'
        break
      case 'NOT_START':
        // 时间处理 返回文字
        if (timeCalc.symbol > 0) {
          timeText = `${timeCalc.diff}后开启`
        } else {
          timeText = '今天开启'
        }
        if (timeCalc.isToday) {
          timeText = '今天开启'
        }
        showLookCount = false
        break
      default:
        timeText = '已下架'
        break
    }
    return { val: timeText, showLookCount }
  }

  dealSignText = (num, state) => {
    // 处理人数
    if ((num === '' || num == null) && !isNaN(num)) {
      return `0人报名`
    }
    let stateText = ''
    if (state === 'NOT_START') {
      stateText = '报名'
    } else {
      stateText = '观看'
    }
    let txt = `${num || 0}人${stateText}`
    if (num >= 1000 && num < 10000) {
      const countArr = []
      countArr[0] = Math.floor(num / 1000)
      countArr[1] = Math.floor(num % 1000 / 100)
      txt = `${countArr[0]}.${countArr[1]}k人${stateText}`
    } else if (num >= 10000) {
      const countArr = []
      countArr[0] = Math.floor(num / 10000)
      countArr[1] = Math.floor(num % 10000 / 1000)
      txt = `${countArr[0]}.${countArr[1]}w人${stateText}`
    }
    return txt
  }
}

const styles = StyleSheet.create({
  inLineStyle: {
    opacity: 0.3
  },
  liveItem: {
    position: 'relative',
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: ScaleS(24),
    width: '100%'
  },
  leftImg: {
    width: ScaleS(168),
    height: ScaleS(92),
    marginRight: ScaleS(10),
    resizeMode: 'cover',
    borderRadius: ScaleS(10)
  },
  rightContent: {
    flexDirection: 'column',
    flex: 1
  },
  liveIcon: {
    width: ScaleS(13),
    height: ScaleS(11)
  },
  title: {
    marginTop: ScaleS(13),
    marginBottom: ScaleS(7),
    fontSize: ScaleT(14),
    fontWeight: '500',
    color: '#3C3C3C'
  },
  subTitle: {
    fontSize: ScaleS(12),
    fontWeight: '500',
    color: '#818181'
  },
  signUp: {
    position: 'absolute',
    left: 8,
    bottom: 7,
    width: ScaleS(54),
    height: ScaleS(18),
    backgroundColor: 'rgba(0,0,0,0.4)',
    borderRadius: ScaleS(9),
    justifyContent: 'center',
    alignItems: 'center'
  },
  signUpText: {
    fontSize: ScaleT(11),
    color: '#fff'
  }
})
